<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
	<title>将执行动画效果的代码封装到函数</title>
	<style type="text/css">
		*{
			margin: 0;padding: 0;
		}
		#main{
			width: 100px;height: 100px;background: red;opacity: 0.2;
		}
	</style>
</head>
<body>
<div id="main"></div>
<script type="text/javascript">
var oDiv = document.getElementById('main');

// 获得元素的css属性的值
// 参数1：获得节点对象的css属性值（该对象）
// 参数2：获得该节点对象的什么属性（属性名）
function getStyle(element,attr) {
	if (window.currentStyle) {
		return element.currentStyle[attr];
	}else{
		return getComputedStyle(element,false)[attr];
	}
}

// 自定义函数实现多css属性执行动画效果
// 参数1：执行动画效果的dom节点对象
// 参数2：执行动画的css属性：格式{opacity：0.1,left:500,top:300,width:500}
// var timer;
function animation(element,json,fn) {
	
	// 遍历所有执行动画的css属性，获得每个属性所到达的目的地
	
		
	clearInterval(element.timer);
		
	element.timer = setInterval(function () {
		var flag = true;
		for(var attr in json){
			var destination = json[attr];
			// 针对opacity 特殊处理
			if (attr == 'opacity') {
				// 从当前位置，加或减到目的地
				var now = parseInt(getStyle(element,'opacity')*100);
			}else{
				var now = parseInt(getStyle(element,attr));	
			}
			// 目的地
			
			// 计算速度，从起点到达目的地的移动速度
			// 因为js小数计算不准，所以向上取整
			var speed = (destination-now)/10;

			speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed);
			
			if (attr == 'opacity') {
				element.style.opacity = (now + speed) / 100;
			}else{
				element.style[attr] = now + speed + 'px';
			}
			// if (now == destination) {
			// 	clearInterval(element.timer);
			// }
			if(now != destination){
				flag = false;						
			}
		}
		if(flag){
			clearInterval(element.timer);
			if(fn){
				fn();
			}
		}
	},50);
		
	
}
oDiv.onmouseover = function () {
	animation(this,{width:500,height:500,opacity:100},function () {
		alert('执行完毕');
	});
}
oDiv.onmouseout = function () {
	// body...
	animation(this,{width:100,height:100,opacity:20});
}
</script>
</body>
</html>